//id ,是否折叠其他,默认显示第几个 0开始
var water1, water2;
sui.ready(function() {

	setTimeout(function() {
		setChart1();
		setChart2();
	}, 500)


})

var vm = new Vue({
	el: "#datas",
	data: {
		switchStatus: [false, false, false, false, false, false]
	},
	mounted: function() {

	},
	methods: {
		radioClass: function(index) {
			return this.switchStatus[index] == true ? "radio-on" : "radio-off"
		},

		onRadioClicked: function(index) {
			var status = this.switchStatus[index] || false;
			this.$set(this.switchStatus, index, !status);
		},

		bengClass: function(index) {
			var status = this.switchStatus[index] || false;
			return status == true ? "img/beng_2.png" : "img/beng_1.png"
		},

		openWarningInfo: function(index) {
			sui.open("warning_info.html?type=" + index);
		},

	},



})



function setChart1() {
	var myChart = echarts.init(document.getElementById('chart1'));
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		
		//backgroundColor:"#fff",
		color: ["#007EFE", "#00FEFB", "#FE7800", ],
		series: [{
				name: '访问来源',
				type: 'pie',
				radius: ['80%', '72%', "21%"],
				center: ['50%', '50%'],
				itemStyle: {
					normal: {
						// 设置扇形的阴影
						shadowBlur: 30,
						shadowColor: 'rgba(0, 126, 254, 76)',
						shadowOffsetX: -3,
						shadowOffsetY: 3

					}
				},
				label: {
					normal: {
						show: false,
						position: 'center'
					},
					emphasis: {
						show: true,
						textStyle: {
							fontSize: '16',
							fontWeight: 'bold'
						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [{
						value: 2,
						name: '门禁'
					},
					{
						value: 4,
						name: '水浸'
					},
					{
						value: 1,
						name: '烟感'
					}
				]
			}

		]
	};

	myChart.setOption(option);

}

function setChart2() {
	var myChart = echarts.init(document.getElementById('chart2'));

	//var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];

	var myColor = [ '#FF7400','#11F5FA','#1079EA'];
	var shadowColor =  ['rgba(255,227,42,0.3)','rgba(255,227,42,0.3)','rgba(255, 116, 0, 0.7)']
	
	
	var option = {
		grid: {
			left: '1%',
			top: '10%',
			right: '0%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: [{
			show: false,
		}],
		yAxis: [{
			show: false,
			axisTick: 'none',
			axisLine: 'none',
			data: ['1', '2', '3']
		}, {
			show: false,
			axisTick: 'none',
			axisLine: 'none',
			axisLabel: {
				textStyle: {
					color: '#ffffff',
					fontSize: '16',
				}
			},
			data: ['10', '8', '2']
		}, {
			name: '',
			nameGap: '50',
			nameTextStyle: {
				color: '#ffffff',
				fontSize: '16',
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(0,0,0,0)'
				}
			},
			data: [],
		}],
		series: [{
				name: '条',
				type: 'bar',
				yAxisIndex: 0,
				data: [54,49,59],
				barWidth: 6,
				itemStyle: {
					normal: {
						color: function(params) {
							var num = myColor.length;
							return myColor[params.dataIndex % num]
						},
					}
				},
				z: 2
			}, {
				name: '白框',
				type: 'bar',
				yAxisIndex: 1,
				barGap: '-100%',
				data: [99, 99, 99],
				barWidth: 8,
				itemStyle: {
					normal: {
						color: '#242E39',
						barBorderRadius: 5,
					}
				},
				z: 1
			}, {
				name: '外框',
				type: 'bar',
				yAxisIndex: 2,
				barGap: '-100%',
				data: [100, 100, 100],
				barWidth: 9,
				itemStyle: {
					normal: {
						color: function(params) {
							var num = myColor.length;
							console.log("myColor:" + myColor[params.dataIndex % num] )
							return myColor[params.dataIndex % num]
						},
						barBorderRadius: 5,
						show: true,
						shadowColor: shadowColor[0],
						shadowBlur: 8
					}
				},
				z: 0
			},
			{
				name: '外圆',
				type: 'scatter',
				hoverAnimation: false,
				data: [0, 0, 0],
				yAxisIndex: 2,
				symbolSize: 12,
				itemStyle: {
					normal: {
						color: function(params) {
							var num = myColor.length;
							return myColor[params.dataIndex % num]
						},
						opacity: 1,
						show: true,
						shadowColor: shadowColor[1],
						shadowBlur: 8
					}
				},
				z: 2
			}
		]
	};

	myChart.setOption(option);


}






// async function beginAnimation(time) {
// 	await waitingS(1);
// 	water1.className.baseVal = "water";
// 	await waitingS(4);
// 	water1.className.baseVal = "run_water";
// 	await waitingS(4);
// 	water1.className.baseVal = "no-water";
// 	water2.className.baseVal = "water";
// 	await waitingS(4);
// 	water2.className.baseVal = "run_water";
// 	//water2.className.baseVal = "water";
// }

// async function waitingS(time) {
// 	return new Promise(function(resolve, reject) {
// 		setTimeout(function() {
// 			resolve("成功");
// 		}, time * 1000);
// 	});
// }
